﻿<%@ Page Language="C#" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.IO" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script runat="server">
    protected void OnColorChanged(object sender, EventArgs e)
    {
        ColorLabel.ForeColor = Color.FromName(DropDownList1.SelectedValue);
    }

    protected void GetServerTime(object sender, EventArgs e)
    {
        lbTimer.Text = "Server Time:" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss");
    }

    protected void PropertiesChanged(object sender, EventArgs e)
    {
        Tabs1.Sortable = cbSortable.Checked;
        Tabs1.Collapsible = cbCollapsible.Checked;
        Tabs1.Deselectable = cbDeselectable.Checked;
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <div class="dna-state-loading-s">
                <div>
                </div>
            </div>Loading...
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <DotNetAge:Tabs ID="Tabs1" runat="server" AutoPostBack="true">
                <Views>
                    <DotNetAge:View ID="View3" runat="server" Text="Description">
                        <p>
                            Tabs is a ASP.NET WebControl that encapsulated the jQuery UI tabs plugin.Tabs are
                            generally used to break content into multiple sections that can be swapped to save
                            space, much like an Accordion.
                        </p>
                        <p>
                            By default a Tabs will swap between tabbed sections onClick, but the events can
                            be changed to onHover through an property. Tab content can be loaded via Ajax by
                            setting an NavigateUrl on a View Control.
                        </p>
                    </DotNetAge:View>
                    <DotNetAge:View ID="View5" runat="server" Text="Tab settings">
                        <div>
                            <h6>
                                <b>Controls' Properies:</b></h6>
                            <div class="dna-demo-fields">
                                <ul>
                                    <li><span>Sortable</span><asp:CheckBox ID="cbSortable" runat="server" OnCheckedChanged="PropertiesChanged"
                                        AutoPostBack="true" Text="" /></li>
                                    <li><span>Deselectable</span><asp:CheckBox ID="cbDeselectable" runat="server" OnCheckedChanged="PropertiesChanged"
                                        AutoPostBack="true" /></li>
                                    <li><span>Collapsible</span><asp:CheckBox ID="cbCollapsible" runat="server" OnCheckedChanged="PropertiesChanged"
                                        AutoPostBack="true" /></li>
                                </ul>
                            </div>
                        </div>
                    </DotNetAge:View>
                    <DotNetAge:View ID="View2" runat="server" Text="Using UpdatePanel">
                        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                            <ProgressTemplate>
                                <div class="dna-state-loading-s">
                                    <div>
                                    </div>
                                </div>
                            </ProgressTemplate>
                        </asp:UpdateProgress>
                        <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                            <ContentTemplate>
                                <div>
                                    Colors:<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" Width="150"
                                        OnSelectedIndexChanged="OnColorChanged">
                                        <asp:ListItem Text="Black" Style="background-color: Black; color: White;" Value="Black"></asp:ListItem>
                                        <asp:ListItem Text="Red" Style="background-color: Red; color: White;" Value="Red"></asp:ListItem>
                                        <asp:ListItem Text="Blue" Style="background-color: Blue; color: White;" Value="Blue"></asp:ListItem>
                                    </asp:DropDownList>
                                </div>
                                <div>
                                    <asp:Label ID="ColorLabel" runat="server" Text="Choice the color above the DropDownList to change this label's color"></asp:Label></div>
                                <br />
                                <br />
                                <div>
                                    <asp:Label ID="lbTimer" runat="server" Text="Click the 'Go' button to load the server time."></asp:Label></div>
                                <br />
                                <br />
                                <div>
                                    <asp:Button ID="Button1" runat="server" Text="Go" OnClick="GetServerTime"></asp:Button>
                                </div>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </DotNetAge:View>
                </Views>
            </DotNetAge:Tabs>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
